<template>
    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="login" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45"></span>

                    <van-field
                        v-model="business.mobile"
                        name="mobile"
                        placeholder="手机号码"
                        left-icon="phone-o"
                        required
                        :rules="[
                            {required:true,message:'请填写手机号码'},
                            {pattern: /^1[3-9]\d{9}$/,message: '手机号码格式不正确'}
                        ]"
                    />

                    <van-field
                        v-model="business.password"
                        type="password"
                        name="password"
                        placeholder="密码"
                        required
                        left-icon="question-o"
                        :rules="[
                            {required:true,message:'请填写密码'}
                        ]"
                    />

                    <div class="container-login100-form-btn p-t-10">
                        <van-button round block color="linear-gradient(160deg,#0093E9 0%,#80D0C7 100%)" native-type="submit">登 录</van-button>
                    </div>

                    <div class="text-center w-full p-t-25 p-b-230">
                        <a href="index.html#" class="txt1">忘记密码？</a>
                    </div>

                    <div class="text-center w-full">
                        <router-link :to="{path:'/business/register'}">
                            立即注册
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script setup>
    //获取类似于vue2的this对象
    // import { getCurrentInstance } from 'vue';
    const {proxy} = getCurrentInstance()

    //挂载前的生命周期
    onBeforeMount(async ()=>{
        var result = await proxy.$login()
        if(result.code == 1)
        {
            var redirect = proxy.$cookies.get('redirect') ? proxy.$cookies.get('redirect') : '/business/index'

            //提醒
            proxy.$success({
                message: "您已登录无需重复登录",
                duration: 1000,
                onClose: () =>
                {
                    proxy.$router.push(redirect)
                    return false
                }
            })
        }
    })

    //创建数据
    let business = ref({
        mobile: '18888888888',
        password: ''
    })

    const login = async (values)=>
    {
        //发送接口请求
        var result = await proxy.$POST({
            url: '/business/login',
            params: business.value
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg);
            return false
        }

        //登录成功后并跳转
        proxy.$success({
            message: result.msg,
            duration: 1000,
            onClose: ()=> //关闭后回调函数
            {
                proxy.$cookies.set('business',result.data)

                var redirect = proxy.$cookies.get('redirect') ? proxy.$cookies.get('redirect') : result.url

                //跳转
                proxy.$router.push(redirect)
                return false
            }
        })
    }
</script>